<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据报表标注</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/dcalendar.picker.css">
  <link rel="stylesheet" type="text/css" href="css/common.css"/>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
  <link type="text/css" rel="stylesheet" href="css/owl.carousel.css">
  <link type="text/css" rel="stylesheet" href="css/owl.theme.css">
  <link rel="stylesheet" href="css/cqs.style.css">
</head>
<body style="background-color: #f4f4f4;">
<div class="cqs-main">
  <div class="cqs-main_top cqs-mgt30">数据报表：成本中心<button class="cqs-output" style="float: right; margin-right: 20px;margin-top:19px;">导出报表</button></div>
  <div class="cqs-main_con">
    <div class="cqs-main_left cqs-moth-number">
      <div class="cqs-title">月采购量 <div class="date-box cqs-year">
      <span class="date-group"><input id='mydatepicker' style="width: 120px;" placeholder="2018年03月" type='text'/>
        <img src="img/btn_arrow_down_h.png" alt=""></span>
      </div></div>

      <div id="chart" class="myChart"></div>
      <div class="i-char-hint2">
        <p>
          <span>icon</span>总部-销售部
        </p>
        <p>
          <span class="cqs-4c80a7">icon</span>总部-产品部
        </p>
        <p>
          <span class="cqs-69b2e7">icon</span>总部-技术部
        </p>
        <p>
          <span class="cqs-f9a825">icon</span>总部-财务部
        </p>
        <p>
          <span class="cqs-e85b3f">icon</span>无锡分公司
        </p>
      </div>
    </div>
    <div class="cqs-main_right cqs-year-number">
      <div class="cqs-title">年采购量
        <div class="date-box cqs-year">
          <select class="form-control">
            <option>成本中心采购总额</option>
            <option>成本中心采购总额</option>
            <option>成本中心采购总额</option>
            <option>成本中心采购总额</option>
            <option>成本中心采购总额</option>
          </select>
        </div>
      </div>

      <div style="margin-left: 25px;" id="myChart" class="myChart"></div>

    </div>
  </div>
  <div class="index-box index-box2 box-shadow" style="margin-top:15px;">
    <div class="box1-tit-wrapper">
      <span class="tit index-box2-tit">员工福利商品TOP10</span>
      <a href="javascript:;" class="get-more">查看更多> </a>
    </div>
    <div class="pro-top10">
      <div class="scroll-outer">
        <div id="scroll" class="owl-carousel scroll">
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                <span class="sale">月销量：<em>8</em></span>
                <span class="appraise">评价：200</span>
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
          <div class="item">
            <img src="img/img1.jpg" alt="">
            <div class="shd"><a href="#"></a></div>
            <div class="txt">
              <p class="price"><em>￥</em>420.75</p>
              <a href="#" class="intro">达伯埃Double A 80gA3复印纸 500张/包。</a>
              <a href="javascript:;" class="link-wjyh">文具1号超市</a>
              <p class="txt-btm">
                累计购买：200件
              </p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/dcalendar.picker.js"></script>
<script src="js/ichart.1.2.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script>


  $(function(){
    var data = [
      {
        name : '北京',
        value:[200,2000,1500,2500,2600,3000,3200,2900,2200,1200,1000,5500],
        color:'#c40000',
        line_width:2
      }
    ];
    var chart = new iChart.LineBasic2D({
      render : 'myChart',
      data: data,
      title : '成本中心采购总额',
      width : 580,
      height : 350,
      tip:{
        enable:true,
        shadow:false,
        listeners:{
          //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
          parseText:function(tip,name,value,text,i){
            return "<span style='background-color#2b2d2e;font-size:20px;'>¥"+value+"</span>";
          }
        }
      },
      // offsetx: 80,
      // offsety: 50,
      crosshair:{
        enable:true,
        line_color:'#ec4646'
      },
      coordinate:{height:'90%',background_color:'#ffffff',striped: true},
      sub_option:{
        hollow_inside:true,//设置一个点的亮色在外环的效果
        point_size:10,
        smooth : true,
        label:false
      },
      align: 'center',
      border: 0,
      label: {
        color: '#2b2d2e'
      },
      labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
    });

    chart.draw();
  });


  $(function(){
    var data = [
      {name : 'Top1\n\r总部-销售部\n\r￥9000.00',value : 9000.00,color:'#eecb58'},
      {name : 'Top2\n\r总部-产品部\n\r￥3000.00',value : 3000.00,color:'#4c80a7'},
      {name : 'Top3\n\r总部-技术部\n\r￥2000.00',value : 2000.00,color:'#69b2e7'},
      {name : '',value : 1000.00,color:'#e85b3f'},
      {name : '',value : 500.00,color:'#f9a825'}
    ];


    var chart = new iChart.Pie2D({
      render : 'chart',
      data: data,
      title : {
        text : '成本中心(总额)2017-12：￥10,500.00',
        color : '#5c606b',
        fontsize: '16px'
      },
      sub_option : {
        label : {
          background_color:null,
          sign:false,//设置禁用label的小图标
          padding:'0 4',
          border:{
            enable:false,
            color:'#666666'
          },
          fontsize:14,
          fontweight:600,
          color : '#2b2d2e'
        },
        border : {
          width : 2,
          color : '#ffffff'
        }
      },
      shadow : true,
      shadow_blur : 6,
      shadow_color : '#aaaaaa',
      shadow_offsetx : 0,
      shadow_offsety : 0,
      background_color:'#fefefe',
      legend : {
        enable : false,
        align : 'center',
        valign: 'bottom'
      },
      valign:top,
      offsetx:0,//设置向x轴负方向偏移位置60px
      offset_angle:-120,//逆时针偏移120度
      showpercent:false, // 显示百分比
      decimalsnum:2,
      width : 540,
      height : 300,
      radius:120,
      border: 0
    });
    //利用自定义组件构造右侧说明文本
    chart.plugin(new iChart.Custom({
      drawFn:function(){
        //计算位置
        var y = chart.get('originy'),
          w = chart.get('width');

        //在右侧的位置，渲染说明文字
      //   chart.target.textAlign('start')
      //     .textBaseline('middle')
      //     .textFont('600 16px Verdana')
      //     .fillText('UC浏览器、\n手机QQ浏览器及\n欧朋浏览器的份额\n位列第三方手机浏览器\n市场前三甲',w-220,y-40,false,'#be5985',false,20);
      }
    }));

    chart.draw();
  });


  $('#mydatepicker').dcalendarpicker({
    format: 'yyyy年MM月',
    defaultDate: '1',
    changeYear: true
  });

  $('#scroll').owlCarousel({
    items: 5,
    autoPlay: false,
    navigation: true,
    navigationText: ["", ""],
    scrollPerPage: true
  });
</script>
</body>
</html>